<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		getCiHuiListApi
	} from '../../api/request.js';
	import {
		onUnload,
		onHide,
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	// 1美 2英
	const type = ref(2);
	const props = defineProps({});
	const query = ref({
		wp_id: '',
		page: 1,
		la: true,
		trigger: false,
		pageSize: 20
	});
	const list = ref(null);
	const getList = async (type = true) => {
		console.log('我被调用了');
		// uni.showLoading({
		//     mask: true
		// });
		let res = await getCiHuiListApi(query.value);
		if (!type || !list.value) {
			list.value = [];
		}
		console.log(res);
		res.data.list.map((item) => {
			list.value.push(item);
		});
		// console.log(list.value);
		query.value.total = res.data.count;
		if (query.value.page * 20 >= query.value.total) {
			query.value.la = false;
		} else {
			query.value.la = true;
		}
	};
	onLoad(async (e) => {
		query.value.wp_id = e.id;
	});
	onShow(async () => {
		if (uni.getStorageSync('bofangmoshi')) {
			type.value = uni.getStorageSync('bofangmoshi');
		}
		getList(false).finally(() => {
			// uni.hideLoading();
		});
	});
	let platform = uni.getStorageSync('platform');
	const goback = () => {
		uni.navigateBack();
	};
	const show = ref(true);
	setTimeout(() => {
		show.value = false;
	}, 2000);
	const formatTime = (timeInSeconds) => {
		const hours = Math.floor(timeInSeconds / 3600); // 获取小时
		const minutes = Math.floor((timeInSeconds % 3600) / 60); // 获取分钟
		const seconds = Math.floor(timeInSeconds % 60); // 获取秒数
		const pad = (num) => String(num).padStart(2, '0');
		return `${pad(minutes)}:${pad(seconds)}`;
	};
	const timeNow = ref(600);
	const timer = ref(null);
	timer.value = setInterval(() => {
		timeNow.value -= 1;
		if (timeNow.value == 0) {
			clearInterval(timer.value);
			timer.value = null;
			if (selectList.value.length + noSelectList.value.length != list.value.length) {
				uni.navigateBack();
			}
		}
	}, 1000);
	onUnload(() => {
		if (timer.value) {
			clearInterval(timer.value);
			timer.value = null;
		}
	});
	onHide(() => {
		if (timer.value) {
			clearInterval(timer.value);
			timer.value = null;
		}
	});
	onHide(() => {
		uni.$emit('pause');
	});
	onUnload(() => {
		uni.$emit('pause');
	});
	const noSelectList = ref(new Set());
	const selectList = ref(new Set());
	const statusList = ref({});

	const changeSelectList = (id, type) => {
		const targetList = type === 1 ? noSelectList : selectList;
		const otherList = type === 1 ? selectList : noSelectList;
		if (targetList.value.has(id)) {
			targetList.value.delete(id);
		} else {
			targetList.value.add(id);
			otherList.value.delete(id);
		}
	};
	const getSelectId = (id) => selectList.value.has(id);
	const getNoSelectId = (id) => noSelectList.value.has(id);
	const playAudio = (id, url) => {
		let http =
			type.value == 1 ?
			'https://static.jtsee.com/app_media/words_mp3_v2/us/aria_word/' :
			'https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/';
		console.log(`https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/${url}`);
		uni.$emit('playAudio', http + `${url}`, true);
		if (statusList.value.id !== id) {
			statusList.value = {
				id,
				status: 1
			};
		} else {
			statusList.value.status = (statusList.value.status % 4) + 1;
		}
	};
	const returnStatus = (id) => {
		if (statusList.value.id === id) {
			const status = statusList.value.status;
			return status === 1 ? 'active' : status === 2 ? 'default' : status === 3 ? 'kong' : '';
		}
		return '';
	};

	const submit = () => {
		if (noSelectList.value.size < 1 || noSelectList.value.size % 5 !== 0) {
			uni.showToast({
				title: '不会的单词只能是5的倍数',
				icon: 'none'
			});
			return;
		}
		const hui = Array.from(selectList.value).join(',');
		const buhui = Array.from(noSelectList.value).join(',');
		uni.redirectTo({
			url: `/pages/world/readWorld?hui=${hui}&buhui=${buhui}&id=${query.value.wp_id}`
		});
	};
	const handlePullDownRefresh = () => {
		if (query.value.la) {
			// uni.showLoading({});
			query.value.page += 1;
			getList(true).finally(() => {
				// uni.hideLoading();
			});
		}
	};
	const handleReachBottom = () => {
		query.value.trigger = true;
		query.value.page = 1;
		getList(false).finally(() => {
			query.value.trigger = false;
		});
	};
</script>

<template>
	<view class="wrap" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 选择不会的单词开始训练 </view>
			<image class="left" style="opacity: 0" src="/static/img/goback-black.png" mode="widthFix" />
		</view>
		<view class="shuoming uni-row">
			请您快速在10分钟内选出达不到秒认的单词，提交训练，倒计时正在进行中！{{
                formatTime(timeNow)
            }}
		</view>
		<view class="select-wrap uni-row">
			<view class="left">
				<view class="title"> 训练统计 </view>
				<view class="label"> 正确：{{ selectList.size }} 词 </view>
			</view>
			<view class="right">
				<view class="title"> 训练统计 </view>

				<view class="label"> 错误：{{ noSelectList.size }} 词 </view>
			</view>
		</view>
		<scroll-view @scrolltolower="handlePullDownRefresh" refresher-enabled="true"
			:refresher-triggered="query.trigger" @refresherrefresh="handleReachBottom" scroll-y="true" class="body"
			:style="{
                height: platform.gaodu - platform.dingbu - 96 - 48 - 186 - 196 + 'rpx',
                minHeight: '400rpx'
            }">
			<view class="item uni-row" v-for="(item, index) in list||[]" :key="item"
				@click="playAudio(item.id, item.detail.audio_file_name.word)" :class="returnStatus(item.id)">
				<view class="left">
					{{ item.name }}
				</view>
				<view class="fanyi">
					{{ item.detail.youdao_api.translation[0] }}
				</view>
				<view class="right uni-row">
					<view class="items uni-row" v-for="(i, iIndex) in ['会', '不会']" :key="iIndex"
						@click.stop="changeSelectList(item.id, iIndex)" :class="
                            iIndex == 0 && getSelectId(item.id)
                                ? 'default'
                                : iIndex == 1 && getNoSelectId(item.id)
                                ? 'active'
                                : ''
                        ">
						<image :src="
                                iIndex == 0
                                    ? '/static/img/wolrd/default-dui.png'
                                    : '/static/img/wolrd/default-cuo.png'
                            " class="icon s"></image>
						<image :src="
                                iIndex == 0
                                    ? '/static/img/wolrd/dui.png'
                                    : '/static/img/wolrd/cuo.png'
                            " class="icon ss">
						</image>
					</view>
				</view>
			</view>
			<view class="nothing" v-if="list && list.length < 1">
				<image src="/static/img/nothing.png" class="img"></image>
				<view class="label"> 哎呀，这里什么内容都没有 </view>
			</view>
			<view style="height: 4rpx"> </view>
		</scroll-view>
		<view style="height: 39rpx"> </view>
		<view class="btn uni-row" v-if="list && list.length > 1" @click="submit"> 开始训练 </view>
		<view style="height: 39rpx"> </view>
	</view>
	<view class="tishi uni-row" v-if="show">
		<image src="/static/img/wolrd/gantanhao.png" mode="widthFix" class="gantan"></image>
		<view class="label"> 达不到英语单词秒认的不要选择会，慎重选择 </view>
	</view>
</template>
<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.shuoming {
			justify-content: center;
			height: 48rpx;
			background: #ffeeee;
			font-size: 20rpx;
			color: #ef4828;
		}

		.select-wrap {
			padding: 24rpx 28rpx 18rpx;
			height: 216rpx;

			.left,
			.right {
				flex: 1;
				height: 174rpx;
				padding: 36rpx 28rpx 0 30rpx;

				.title {
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}

				.label {
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}

			.left {
				background: url('/static/img/wolrd/left.png');
				background-size: 100% 100%;

				.label {
					color: #6489fa;
				}
			}

			.right {
				padding-left: 48rpx;
				background: url('/static/img/wolrd/right.png');
				background-size: 100% 100%;

				.label {
					color: #ef4828;
				}
			}
		}

		.body {
			padding-left: 28rpx;
			padding-right: 28rpx;

			.item {
				justify-content: space-between;
				height: 84rpx;
				background: #ffffff;
				border-radius: 8rpx;
				padding: 0 28rpx;
				margin-bottom: 16rpx;

				.left {
					font-size: 36rpx;
					color: #333333;
				}

				.fanyi {
					margin-left: auto;
					margin-right: 42rpx;
					font-size: 28rpx;
					color: #333333;
					opacity: 0;
				}

				.right {
					.items {
						justify-content: center;
						margin-left: 20rpx;
						// width: 96rpx;
						height: 48rpx;
						// background: #F7F7F7;
						// border-radius: 8rpx;
						font-size: 24rpx;
						color: #999999;

						.icon {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}

						.ss {
							display: none;
						}

						&.active {
							.s {
								display: none;
							}

							.ss {
								display: block;
							}
						}

						&.default {
							.ss {
								display: block;
							}

							.s {
								display: none;
							}
						}
					}
				}

				&.active {
					.left {
						font-weight: 600;
						font-size: 38rpx;
					}

					.fanyi {
						opacity: 0;
					}
				}

				&.default {
					.left {
						font-weight: 600;
						font-size: 38rpx;
					}

					.fanyi {
						opacity: 1;
					}
				}

				&.kong {

					.left,
					.fanyi {
						opacity: 0;
					}
				}
			}
		}

		.btn {
			justify-content: center;
			font-size: 32rpx;
			color: #ffffff;
			margin: 0 auto;
			width: 610rpx;
			height: 88rpx;
			background: #9561f3;
			border-radius: 16rpx;
		}
	}

	.tishi {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%);
		z-index: 3;
		justify-content: center;
		transition: 1s all;
		width: 590rpx;
		height: 66rpx;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 74rpx;

		.gantan {
			width: 40rpx;
			margin-right: 8rpx;
		}

		.label {
			font-size: 24rpx;
			color: #ffffff;
		}
	}
</style>